<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" width="500px" title="修改用户信息"
		:model-value="visible" @close="onCancel">

		<template #footer>
			<el-button key="back" @click="() => onCancel()">取消</el-button>
			<el-button key="submit" type="primary" @click="submitForm()">添加
			</el-button>
		</template>


		<el-form :model="modelRef" :rules="rulesRef" ref="formRef" label-width="100px">
			<el-form-item label="用户名" prop="userName">
				<el-input type="text" v-model="modelRef.userName" placeholder="用户名" />
			</el-form-item>
			<el-form-item label="真实姓名" prop="realName">
				<el-input v-model="modelRef.realName" placeholder="真实姓名" />
			</el-form-item>
			<el-form-item label="手机号" prop="mobile">
				<el-input type="text" v-model="modelRef.mobile" placeholder="手机号码" />
			</el-form-item>
			<el-form-item label="密码" prop="pwd">
				<el-input
				      v-model="modelRef.pwd"
					  :type="passwordVisible?'text':'password'"
				    >
				      <template #append>
						  <div @click="togglePasswordVisibility">
							   <el-icon v-if="passwordVisible"><View /></el-icon>
							   <el-icon v-else><Hide /></el-icon>
						  </div>
						 
				       </template>
				    </el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input type="text" v-model="modelRef.email" placeholder="电子邮箱" />
			</el-form-item>
			<el-form-item label="备注" prop="mem">
				<el-input type="text" v-model="modelRef.mem" placeholder="备注信息" />
			</el-form-item>
			<el-form-item label="站点" v-if="site==0">
				<site-server :siteValue="siteValue" :onchange="changeSite"></site-server>
			</el-form-item>

		</el-form>


	</el-dialog>

</template>

<script setup lang="ts">
	import { useI18n } from "vue-i18n";
	import { TableListItem } from '../data.d'
	import { AdminuserAdd } from '../service'
	import {
		reactive,
		ref,
		defineProps,
		onMounted,
		inject,
		watch,
		computed
	} from 'vue'
	import type {
		FormInstance,
		FormRules,

	} from 'element-plus'
	import {
		ElMessageBox, ElForm, ElMessage
	} from 'element-plus';
	import { useUserStore } from '@/store/user';
	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		onCancel: {
			type: Function,
			required: true
		},
		onSubmit: {
			type: Function,
			required: true
		},

	})

	const { t } = useI18n();
	const user = useUserStore();
	const site = computed(() => user.$state.user.site);

	// 表单值
	const modelRef = ref<TableListItem>({
		Id: 0,
		userName: '',
		realName: '',
		email: '',
		mobile: '',
		mem: '',
		imgHead: '',
		pwd:''
	});

	// 表单验证
	const rulesRef = reactive({

		pwd: [
			{
				required: true,
				message: t('page.user.register.form-item-password.required'),
			},
			{ min: 6, max: 50, message: '密码长度应该是 6 to 50', trigger: 'blur' },
		],
		confirm: [
			{
				validator: (rule : any, value : string, callback : any) => {
					if (value === '') {
						return Promise.reject(t('page.user.register.form-item-password.required'));
					} else if (value !== modelRef.pwd) {
						return Promise.reject(t("page.user.register.form-item-confirmpassword.compare"));
					} else {
						return Promise.resolve();
					}
				}
			}
		],
		userName: [
			{ required: true, message: '请输入用户名', trigger: 'blur' },

		],
		email: [
			{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
			{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
		],
		realName: [
			{ required: true, message: '请输入真实姓名', trigger: 'blur' },
		],
	});
	const siteValue = ref()
	watch(() => props.visible, (newValue, oldValue) => {
		if (newValue) {
			modelRef.site=site
		}
	})

	// form
	const formRef = ref<typeof ElForm>();
	// 注册loading
	const submitLoading = ref<boolean>(false);
	/**
		* 提交
		*/
	const submitForm = async () => {
		submitLoading.value = true;
		try {
			const valid : boolean = formRef.value ? await formRef.value.validate() : false;
			if (valid === true) {
				let params = modelRef.value;
				params.site = siteValue.value;
				AdminuserAdd(params).then(res => {
					props.onSubmit(params)
				})

			}
		} catch (error) {
			console.log('error', error);
			ElMessage.warning(t('app.global.form.validatefields.catch'));
		}
		submitLoading.value = false;
	};
	const changeSite = (site) => {
		siteValue.value = site
	}
	const passwordVisible=ref(false)
	const togglePasswordVisibility=()=> {
	  passwordVisible.value = !passwordVisible.value;
	}
</script>

<style scoped>
</style>